<template>
  <div class="lop-form-input-box" :class="boxCls">
    <label v-if="title !== ''" class="lop-form-title" :class="rightBtn ? 'lop-form-title-back' : '' " :lop-must="must !== undefined ? mustVal : ''">
      <div class="lop-hide" v-if="hide !== undefined && hide !== ''">{{ hideText }}</div>
      <div class="lop-text">
        <span v-if="must !== undefined" class="lop-form-must">*</span>
        <i class="iconfont" v-if="typeof this.rightBtn === 'string' && this.rightBtn.indexOf( 'lop' ) > 0" :class="rightBtn" ></i>
        <span v-else>{{ title }}</span>
      </div>
    </label>
    <div class="lop-form-input" :style="inputStyle">
      <textarea v-if="type === 'area'" :style="length !== undefined && length !== '' ? 'height: calc(100% - 35px)' : ''"
                class="lop-form-input" :id="lName" :name="lName" :placeholder="tips" :maxlength="length"
                v-model="hereVal" @focus="inputFocus($event.target)"
                @blur="inputBlur($event.target)">{{ val }}</textarea>
      <input :style="length !== undefined && length !== '' ? 'padding-right: ' + inputPaddingRight + 'px' : ''"
             v-else="type === 'text' || type === 'pwd' "
             class="lop-form-input" :type="type === 'pwd' ? 'password' : 'text' " @focus="inputFocus($event.target)"
             @blur="inputBlur($event.target)" :id="lName" :name="lName" :placeholder="tips" :maxlength="length"
             v-model="hereVal"/>
      <span class="lop-inpu-length"
            v-if="lenHide && length !== undefined && length !== ''">{{ hereVal.length }}/{{ length }}</span>
    </div>
    <div class="lop-input-left-btn" v-if="leftBtn" :style="classic ? 'border-style:solid solid solid none;' : ''">
      <i class="iconfont" v-if="typeof this.leftBtn === 'string' && this.leftBtn.indexOf( 'lop' ) > 0" :class="leftBtn" ></i>
      <span v-else>{{ leftBtn }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "lopInput",
    props: {
      title: {
        type: String,
        required: true
      },
      lName: {
        type: String,
        required: true
      },
      must: String,
      tips: String,
      val: [String, Number],
      hide: [String, Number],
      type: {
        type: String,
        default: 'text'
      },
      length: [Number, String],
      classic: Boolean,
      disable: Boolean,
      leftBtn: { Boolean, String },
      rightBtn: Boolean,
      lenHide: Boolean
    },
    data() {
      return {
        hereVal: ( this.val === undefined ? '' : this.val ),
        inputPaddingRight: 10
      }
    },
    methods: {
      inputFocus( obj ) {
        let parent = $( obj ).parents( '.lop-form-input-box' );
        if ( parent.hasClass( 'lop-form-classic' ) )
          $( obj ).parent( 'div.lop-form-input' ).css( 'box-shadow', 'rgba(100,149,237,.2) 0 0 10px' );
        else
          $( parent ).css( 'box-shadow', 'rgba(100,149,237,.2) 0 0 10px' );
      },
      inputBlur( obj ) {
        let parent = $( obj ).parents( '.lop-form-input-box' );
        if ( parent.hasClass( 'lop-form-classic' ) )
          $( obj ).parent( 'div.lop-form-input' ).css( 'box-shadow', 'none' );
        else
          $( parent ).css( 'box-shadow', 'none' );
      }
    },
    computed: {
      mustVal() {
        if ( this.must.trim() === '' )
          return this.title + " 为必传项";
        else
          return this.must
      },
      hideText() {
        let con = '';
        let num = parseInt( this.hide );
        for ( let i = 0; i < num; i++ ) {
          con += '中';
        }
        return con;
      },
      boxCls() {
        let conCls = '';
        if ( this.type === 'area' )
          conCls += ' lop-form-textarea-box ';
        if ( this.classic )
          conCls += ' lop-form-classic ';
        if ( this.disable )
          conCls += ' lop-form-disable ';
        return conCls;
      },
      inputStyle() {
        let conCls = '';
        if ( this.type === 'area' && this.length !== undefined && this.length !== '' )
          conCls += 'padding-bottom: 25px';
        if ( this.classic )
          conCls += 'border-top-right-radius: 0;border-bottom-right-radius: 0;';
        if ( this.rightBtn )
          conCls += 'border-top-left-radius: 0;border-bottom-left-radius: 0;';
        return conCls;
      }
    },
    watch: {
      hereVal( newVal, oldVal ) {
        this.inputPaddingRight = $( '.lop-input-length' ).innerWidth() + 10;
      }
    }
  }
</script>

<style scoped lang="scss">

  /* input 控件样式 */
  .lop-form-input-box {
    margin: 10px 0;
    position: relative;
    min-width: 250px;
    flex-basis: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 1px solid rgba(100, 100, 100, .2);
    background: #FFF;
    height: 40px;
    min-height: 40px !important;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

    .lop-form-title-back{
      background: #f5f7fa;
      border-style: solid none solid solid;
      border-width: 1px;
      border-color: rgba(100, 100, 100, .2);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    .lop-form-title {
      white-space: nowrap;
      display: flex;
      padding-left: 7px;
      padding-right: 7px;
      height: 100%;
      align-items: center;
      z-index: 5;

      .lop-hide {
        font-size: 14px;
      }

      .lop-text {
        font-size: 14px;

        .lop-form-must {
          padding-right: 2px;
          color: red;
        }
      }
    }

    div.lop-form-input {
      flex-basis: 100%;
      border-radius: 5px;
      height: 100%;
      line-height: 40px;
      position: relative;
      -moz-transition: all 0.4s;
      -webkit-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;

      .lop-inpu-length {
        color: #C0C4CC;
        z-index: 5;
        position: absolute;
        right: 5px;
      }

      input.lop-form-input ~ .lop-inpu-length {
        top: 50%;
        transform: translateY(-50%);
      }

      textarea.lop-form-input ~ .lop-inpu-length {
        bottom: 0;
      }

      input.lop-form-input, textarea.lop-form-input {
        position: absolute;
        border-radius: 5px;
        width: 100%;
        border: none;
        outline: none;
        height: 100%;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 14px;

        &::-webkit-input-placeholder {
          color: #c1c7cd;
          font-size: 14px;
        }

        &:-moz-placeholder {
          color: #c1c7cd;
          font-size: 14px;
        }

        &::-moz-placeholder {
          color: #c1c7cd;
          font-size: 14px;
        }

        &:-ms-input-placeholder {
          color: #c1c7cd;
          font-size: 14px;
        }
      }
    }

    .lop-input-left-btn {
      white-space: nowrap;
      padding: 0 7px;
      height: 100%;
      background: #f5f7fa;
      color: #c3c3c3;
      cursor: pointer;
      display: flex;
      align-items: center;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-style: none none none solid;
      border-width: 1px;
      border-color: rgba(100, 100, 100, .2);
      -moz-transition: all 0.4s;
      -webkit-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;

      &:hover {
        color: #999;
      }
    }
  }

  .lop-form-classic {
    background: transparent;
    border: none;
    height: 38px;

    div.lop-form-input {
      background: #FFF;
      border: 1px solid rgba(100, 100, 100, .2);
    }
  }

  .lop-form-disable {
    background: #FFF;
    border: none;

    div.lop-form-input {
      border: none;
    }

    &:after {
      border: 1px solid rgba(100, 100, 100, .2);
      border-radius: 5px;
      content: '';
      display: inline-block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(90, 90, 90, .1);
      z-index: 5;
      cursor: no-drop;
    }
  }

  .lop-form-textarea-box {
    height: 200px;

    .lop-form-title {
      align-items: flex-start;
      padding-top: 10px;

      .lop-form-text {
        height: 200px;
      }
    }

    div.lop-form-input {
      height: 200px;
      padding: 10px;
      display: flex;
      align-items: center;
      overflow: hidden;

      textarea.lop-form-input {
        position: absolute;
        top: 12px;
        resize: none;
        height: calc(100% - 24px);
        width: calc(100% - 20px);

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(0, 0, 0, 0.1);
        }

        /*&::-webkit-scrollbar-track{}*/
      }
    }
  }

</style>
